<template>
  <div>
    <el-card class='box-card'>
      <div slot='header' class='clearfix'>
        <h3>文章举报处理</h3>
      </div>
      <div>
        <el-table
          :data='blogData'
          style='width: 100%;margin-bottom: 20px;'
        >
          <el-table-column type='expand'>
            <template slot-scope='props'>
              <el-descriptions class="margin-top" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"/>
                    举报原因详情
                  </template>
                  {{props.row.reason}}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column label='封面' prop='cover'>
            <template slot-scope='scope'>
              <el-image
                style='width: 60px;'
                :src='scope.row.cover?scope.row.cover:"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"'
                :preview-src-list='[scope.row.cover?scope.row.cover:"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"]'>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label='标题' prop='title'/>
          <el-table-column label='简介' prop='description'/>
          <el-table-column label='作者' prop='author'>
            <template slot-scope='scope'>
              <div style='display: flex; align-items: center;'>
                <el-avatar :src='scope.row.author.avatar'/>
                <span style='text-indent: 1em;'>{{scope.row.author.userName}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label='举报原因' prop='reason'/>
          <el-table-column v-if='blogData.length' align='center' label='操作'>
            <template slot-scope='scope'>
              <el-button
                size='small'
                type='text'
                @click='showDetails(scope.row)'>详情</el-button>
              <span style='color: rgba(126,128,129,0.23);user-select: none;'> | </span>
              <el-dropdown
                class='fx-dropdown'
                @command='handleCommand'
              >
                <span class='el-dropdown-link'>
                  更多<i class='el-icon-arrow-down el-icon--right' />
                </span>
                <el-dropdown-menu slot='dropdown'>
                  <el-dropdown-item :command='{cmd: "ignore", row: scope.row}'>
                    忽略举报
                  </el-dropdown-item>
                  <el-dropdown-item :command='{cmd: "deleteOne",row: scope.row}'>删除文章</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :hide-on-single-page='total <= params.limit'
        layout='total, prev, pager, next'
        :total='total'
        :page-size='params.limit'
        @current-change='changePage'
      />
    </el-card>
  </div>
</template>

<script>
import Sys_AdminService from '@/service/admin/Sys_AdminService'
import Filters from '@/tools/Filters'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import pageUrl from '@/config/pageUrl'

export default {
  name: 'BlogTipOff',
  filters: {
    timeFormat: Filters.timeFormat
  },
  directives:{
    codeLight:{
      inserted(el){
        setTimeout(()=>{
          const codes = el.querySelectorAll('pre code')
          codes.forEach(code => hljs.highlightBlock(code))
        },10)
      }
    }
  },
  data() {
    return {
      blogData: [],
      params: {
        limit: 6,
        skip: 0
      },
      total: 0
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await Sys_AdminService.getTipOffBlogs(this.params)
      if (res.data.status !== 200) return this.blogData = []
      this.blogData = res.data.data.tipData
      this.total = res.data.data.total
    },
    changePage(page) {
      this.params.skip = (page - 1) * this.params.limit
      this.initData()
    },
    showDetails(row) {
      location.replace(`${pageUrl.user}/article/${row.blogId}`)
    },
    async ignore(row) {
      const res = await Sys_AdminService.deleteBlogTipOff({tipOffId: row.tipOffId})
      if (res.data.status !== 200) return this.$message.error(res.data.message)
      this.$message.success(res.data.message)
      setTimeout(() => this.initData(), 1500)
    },
    deleteOne(row) {
      this.$confirm('确定要删除该文章吗？', '删除文章', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'fx-button-primary',
        cancelButtonClass: 'fx-button-default',
        type: 'warning'
      }).then(async () => {
        const res = await Sys_AdminService.deleteBlog({ blogId: row.blogId, key: row.author.key })
        if (res.data.status !== 200) return this.$message.error(res.data.message)
        this.$message.success(res.data.message)
        setTimeout(() => this.initData(), 1500)
      }).catch(() => {})
    },
    handleCommand(command) {
      switch (command.cmd) {
        case 'ignore':
          this.ignore(command.row)
          break
        case 'deleteOne':
          this.deleteOne(command.row)
          break
        default:
          break
      }
    }
  }
}
</script>

<style>

.el-message-box {
  width: 360px !important;
}

.el-message-box__status.el-icon-warning {
  color: red;
}

.fx-button-primary {
  color: #FFF;
  background-color: rgb(250, 84, 28) !important;
  border-color: rgb(234, 113, 72) !important;
  transition: .2s;
}

.fx-button-primary:hover {
  background-color: rgba(250, 84, 28, 0.8) !important;
  transition: .3s;
}

.fx-button-default {
  transition: .2s;
}

.el-button:active {
  color: rgb(250, 84, 28) !important;
  border-color: rgb(234, 113, 72) !important;
}

.fx-button-default:hover {
  color: rgba(250, 84, 28, 0.8);
  border-color: rgb(234, 113, 72);
  background-color: rgba(250, 84, 28, 0.1);
  transition: .3s;
}

.el-select-dropdown__item.selected{
  color: rgba(250, 84, 28) !important;
}
</style>

<style scoped>

>>> .el-button--primary {
  color: #FFF;
  background-color: rgb(250, 84, 28);
  border-color: rgb(234, 113, 72);
  transition: .2s;
}

>>> .el-button--primary:hover {
  background-color: rgba(250, 84, 28, 0.8);
  transition: .3s;
}

>>> .el-button--default {
  transition: .2s;
}

>>> .el-button--default:hover {
  color: rgba(250, 84, 28, 0.8);
  border-color: rgb(234, 113, 72);
  background-color: rgba(250, 84, 28, 0.1);
  transition: .3s;
}

>>> .el-button--text {
  color: rgb(250, 84, 28);
  transition: .2s;
}

>>> .el-button--text:hover {
  color: rgba(250, 84, 28, 0.8);
  transition: .3s;
}

.el-dropdown-link {
  font-size: 12px;
  cursor: pointer;
  color: rgb(250, 84, 28);
}

.el-dropdown-link:hover {
  color: rgba(250, 84, 28, 0.8);
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown-menu__item:hover {
  color: rgba(250, 84, 28, 0.8);
}

>>> .el-table thead {
  color: rgba(0, 0, 0, 0.7);
}

>>> .el-popover {
  position: absolute;
  top: 100px !important;
}

>>> .el-pager li:hover,
>>> .el-pagination button:hover {
  color: rgba(250, 84, 28, 0.8);
}

>>> .el-pager li.active {
  color: rgba(250, 84, 28, 0.8);
}

>>> .el-descriptions-item__label.is-bordered-label{
  width: 10%;
}

>>> .el-table .cell {
  white-space: nowrap;
}
</style>



